<template>
	<view>
		<scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
			<view class="cu-item tab_qh" :class="index==TabCur?'text-blue cur':''" v-for="(item,index) in arr" :key="index" @tap="tabSelect" :data-id="index">{{item}}</view>
		</scroll-view>
		<view class="box1">
			<view class="box4">
				<view class="order_num">订单号：ZD20200426001</view>
				<view class="box4_1">
					<view class="box4_2">
						<view>张三</view>
						<image src="../../static/70.png" mode=""></image>
						<view class="box4_3">A真租</view>
					</view>
					<view class="box4_4">发起面签</view>
				</view>
				<view class="box4_5">
					<view class="box4_6">
						<view>客户来源</view>
						<view class="fot1">福州分公司</view>
					</view>
					<view class="box4_7"><image src="../../static/71.png" mode=""></image>查看详情</view>
				</view>
				<view class="box4_5">
					<view class="box4_6">
						<view>直租车型</view>
						<view class="fot1">2018哈弗H6红标2.0T智享版</view>
					</view>
				</view>
				<view class="box4_5">
					<view class="box4_6">
						<view style="width: 97rpx;text-align: right;">预审批</view>
						<view class="fot1 fot2">
							<view class="fot3">
								银行征信
								<image src="../../static/72.png" mode=""></image>
							</view>
							<view class="fot4">
								大数据
								<image src="../../static/73.png" mode=""></image>
							</view>
							<view class="fot5">
								车辆评估报告
								<image src="../../static/72.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>
				<view class="box4_5">
					<view class="box4_6">
						<view>订单日志</view>
						<view class="box4_7"><image src="../../static/71.png" mode=""></image>查看日志</view>
					</view>
				</view>
			</view>
		</view>
		
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				arr:['未面签','已面签'],
				TabCur: 0,
				scrollLeft: 0
			}
		},
		methods: {
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			}
		}
	}
</script>

<style>
	.order_num{
		color: rgba(150, 156, 169, 1);
		font-size: 36rpx;
		text-align: left;
		font-family: PingFangSC-regular;
		margin-bottom: 20rpx;
	}
	.box1{
		height: calc(100vh - 190rpx);
		overflow: hidden;
		overflow-y: scroll;
		padding: 30rpx;
		box-sizing: border-box;
	}
	.fot5{
		width: 165rpx;
	}
	.fot4{
		width: 95rpx;
		margin: 0 20rpx;
	}
	.fot3{
		width: 115rpx;
	}
	.fot2>view>image{
		width: 20rpx;
		height: 20rpx;
		position: absolute;
		top: 0;
		right: 0;
	}
	.fot2>view{
		position: relative;
	}
	.fot2{
		display: flex;
		align-items: center;
	}
	.box4_7>image{
		width: 21rpx;
		height: 21rpx;
		margin-right: 15rpx;
	}
	.box4_7{
		font-size:24rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(255,120,0,1);
		margin-left: 30rpx;
	}
	.fot1{
		margin-left: 30rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(51,51,51,1);
	}
	.box4_6{
		display: flex;
		align-items: center;
		font-size:24rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(153,153,153,1);
	}
	.box4_5{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 20rpx 0;
	}
	.box4_4{
		width:160rpx;
		height:38rpx;
		border:1px solid rgba(51,51,51,1);
		border-radius:19rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size:22rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(51,51,51,1);
	}
	.box4_3{
		width:88rpx;
		height:28rpx;
		border:1px solid #3A62FF;
		border-radius:14rpx;
		font-size:20rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:#3A62FF;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.box4_2>image{
		width: 24rpx;
		height: 24rpx;
		margin: 0 20rpx;
		
	}
	.box4_2{
		display: flex;
		align-items: center;
		font-size:30rpx;
		font-family:PingFang SC;
		font-weight:bold;
		color:rgba(51,51,51,1);
	}
	.box4_1{
		border-bottom: 1px solid #F2F2F2;
		display: flex;
		justify-content:space-between;
		align-items: center;
		padding-bottom: 19rpx;
		box-sizing: border-box;
	}
	.box4{
		background:rgba(255,255,255,1);
		box-shadow:0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius:10rpx;
		margin-bottom: 30rpx;
		padding: 30rpx;
		box-sizing: border-box;
	}
	.tab_qh{
		width: 50%;
		text-align: center;
		
	}
</style>
